@import '../../../src/res/theme/xxhz.scss';

.outland .main-box {
  background: url('https://resource.ivcheng.com/upload/images/20211014/1634203389397_213.png') no-repeat;
}

.outland {
  .location {
    padding-bottom: 26px !important;
  }
}

.gn .main-box {
  background: url('https://resource.ivcheng.com/upload/images/20211014/1634203355036_308.png') no-repeat;
}

.hotel-list-root {
  width: 100%;
  display: flex;
  justify-content: space-between;
  min-height: 100vh;
  flex-direction: column;

  .listNull {
    position: static !important;
    width: 100%;
    height: 75vw;
    text-align: center;
    overflow: hidden;

    image, .taro-img {
      width: 295px;
      height: 295px;
      margin: 86px auto 35px;
    }

    .text, .taro-text {
      font-size: 24px;
      color: #666
    }
  }

  .recommend {
    background: #fff;
    color: #000;
    font-size: 32px;
    padding-top: 20px;
    padding-left: 20px;
    font-weight: bolder;
    padding-bottom: 20px;
  }

  .main {
    width: 100%;
    box-sizing: border-box;
    padding: 26px 10px 10px;
    position: relative;
    overflow: hidden;
  }

  .order_by_chosed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: $mainColor;
    border-bottom: 1PX solid #d6e4ef;
    position: relative;
    height: 96px;
    width: 100%;
  }

  .order_by_chose {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #242424;
    border-bottom: 1PX solid #d6e4ef;
    position: relative;
    height: 96px;
    width: 100%;
  }

  .order_by_text {
    width: 100%;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .order_by_logo_hide {
    display: none;
  }

  .at-action-sheet__item:after {
    border: none !important;

  }

  .at-action-sheet__item {
    font-size: 30px !important;
  }

  .at-action-sheet__container {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .chose-logo {
    line-height: 45px;
  }

  .main .main-bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .main-box {
    position: relative;
    z-index: 99;
    width: 100%;
    margin-top: 240px;
    overflow: hidden;
    background-size: cover;
  }

  .main .tabs {
    width: 100%;
    height: 100px;
    line-height: 100px;
    display: flex;

    .active-new {
      color: $mainColor;
      font-size: 40px;
    }
  }

  .main .tab {
    width: 50%;
    text-align: center;
    font-size: 32px;
    color: #000;
    position: relative;
  }

  .main .box {
    box-sizing: border-box;
    margin: 0 60px;

    .location-wrapper {
      padding-bottom: 26px;
    }
  }

  .main .location {
    padding: 14px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .main .city {
    font-size: 36px;
    font-weight: bold;
    color: #000;
    width: 60%;
  }

  .main .get-location {
    /* width: 30%; */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .main .hzjiantou::before {
    font-size: 30px;
    color: #cbcdc8;
    display: flex;
    line-height: 1;
  }

  .main .hzLocation::before {
    font-size: 42px;
    color: black;
    display: block;
    line-height: 1;
  }

  .main .location-icon {
    text-align: center;
  }

  .main .location-text {
    font-size: 24px;
    color: #000;
  }

  .main .date {
    width: 100%;
    padding: 30px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e5;
  }

  .main .date .text-box {
    display: flex;
    align-items: center;
    width: 70%;
  }

  .main .date .select-date {
    color: #000;
    font-size: 25px;
  }

  .day-nums {
    margin: 0 50px;
    margin-top: 10px;
  }

  .days {
    min-width: 50px;
    font-size: 24px;
    color: #a9a9a8;
    letter-spacing: 2px;
    white-space: nowrap;
  }

  .main .date .title {
    font-weight: bold;
    font-size: 36px;
    white-space: nowrap;
  }

  .domestic {
    font-weight: normal !important;
  }

  .main .date .tiao {
    height: 2px;
    width: 50px;
    background: #ecebf0;
    margin: 0 34px;
  }

  .main .date .icon-box {
    font-size: 25px;
    color: #000;
  }

  .main {
    .desc {
      color: #a9a9a8;
      font-size: 24px;
      margin-bottom: 10px;
    }
  }

  .main .date .icon-box text {
    margin-right: 5px;
  }

  .main .scenic {
    width: 100%;
    padding: 34px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e5;

    .input {
      font-size: 30px;
    }
  }

  .screen {
    width: 100%;
    padding: 30px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e5;

    .input {
      font-size: 30px;
    }

    .holder-class {
      font-size: 30px;
      color: #93969a;
    }
  }

  .main .btn {
    box-sizing: border-box;
    padding: 50px 10px;

    .button {
      height: 90px;
      width: 96%;
      line-height: 90px;
      text-align: center;
      background: $mainColor;
      color: #fff;
      font-size: 36px;
      border-radius: 45px;
      font-weight: bold;
      border: none;

      &::after {
        border: none;
      }
    }
  }

  .goods-box {
    width: 100%;
    box-sizing: border-box;
    background-color: white;
  }

  .good-item {
    width: 100%;
    border-bottom: solid 1Px #ddd;
    padding: 30px 0;
  }

  .good-item:last-child {
    border-bottom: none;
  }

  .drawer {
    width: 100%;
    overflow: visible;

    .title {
      padding: 20px;
      box-sizing: border-box;
      background-color: #efefef;
      font-size: 28px;
    }

    .content {
      box-sizing: border-box;
      padding-bottom: 60px;
      // display: flex;
      // justify-content: space-between;
      width: 100%;

      // .category-box{
      //     width: 20%;
      // }
      .select-box {
        width: 100%;

        .price-diy {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 40px 40px;

          .price-input {
            width: 40%;
            border: solid 1Px #efefef;
            line-height: 30px;
            font-size: 24px;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 2px 10px;
          }

          .input-place {
            color: #e6e7e9;
          }
        }
      }
    }

    .footer-btn {
      position: sticky;
      width: 100%;
      bottom: 0;
      display: flex;
      padding: 30px;
      box-sizing: border-box;
      border-top: solid 1Px #efefef;
      background-color: white;
      justify-content: space-between;

      .btn {
        width: 45%;
        text-align: center;
        line-height: 70px;
        font-size: 28px;
        border-radius: 10px;
      }

      .reset {
        // background-color: #ffda9a;
        border: 1Px solid #efefef;
        color: $mainColor;
      }

      .submit {
        background-color: $mainColor;
        color: white;
      }
    }
  }

  .screen-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    box-sizing: border-box;
    font-size: 26px;
    line-height: 40px;

    .left-box {
      display: flex;
      align-items: center;
      flex: 1;

      .order-item {
        width: 25%;
        border-right: solid 1Px #efefef;
        text-align: center;
      }

      .order-item:last-child {
        border: none;
      }
    }

    .right-box {
      .btn {
        padding: 4px 8px;
      }

      .btn-hover {
        background-color: #efefef;
      }
    }

    .xxhz-xiala-copy1 {
      font-size: 30px;
    }

    .xxhz-arrow-up {
      font-size: 30px;
    }
  }

  .list-header-box {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;

    .box {
      background-color: #efefef;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;

      .date-box {
        font-size: 20px;
        padding-left: 10px;
        padding-right: 20px;
        border-right: solid 1px #cccccc;
        line-height: 1.2;

        .date-item {
          .tips {
            color: #666666;
            padding-right: 8px;
          }
        }
      }

      .input-box {
        flex-grow: 1;
        font-size: 26px;
        padding-left: 20px;
      }

      .btn-box {
        padding-left: 30px;

        .search {
          font-size: 26px;
          background-color: $mainColor;
          color: white;
          padding: 10px 26px;
          border-radius: 10px;
        }
      }
    }
  }

  .labelBar {
    display: none;
    //display: flex;
    box-sizing: border-box;
    padding: 20px;
    background-color: white;
    z-index: 99;

    .subNav {
      flex-grow: 1;

      .nav-box {
        display: flex;
        width: 100%;
        font-size: 24px;
        color: #3b3b3b;

        .labelT {
          padding: 8px 20px 0;
          flex-shrink: 0;
          position: relative;
          text-align: center;

          .bigImg {
            width: 100px;
            height: 100px;
          }

          .smallImg {
            position: absolute;
            top: 0px;
            right: 40px;
            padding: 2px 4px;
            color: #fff;
            border-radius: 30px;
            font-size: 25px;
            text-align: center;
            background-color: rgb(236, 75, 75);
          }
        }
      }
    }
  }

  .priceBlock {
    .Pword {
      font-size: 20px;
      color: #999;
    }

    .maxPrice {
      float: right;
    }
  }

  .active {
    background-color: $mainColor;
    color: rgb(255, 255, 255);
    text-align: center;
    float: left;
    width: 157px;
    margin-right: 7px;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 10px;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
  }

  .hotelPrice {
    width: 100%;
    margin-bottom: 30px;
    clear: both;
    overflow: hidden;

    .priceLabel {
      text-align: center;
      background-color: #efefef;
      float: left;
      width: 157px;
      margin-right: 7px;
      margin-bottom: 10px;
      padding: 8px;
      border-radius: 10px;
      height: 80px;
      line-height: 80px;
      font-size: 20px;
    }
  }

  .starTypeTit {
    margin-bottom: 25px;
  }

  .starTypeBox {
    width: 100%;
    margin-bottom: 30px;
    clear: both;
    overflow: hidden;

    .starType {
      text-align: center;
      background: #efefef;
      float: left;
      width: 157px;
      margin-right: 7px;
      margin-bottom: 10px;
      padding: 8px;
      border-radius: 10px;
      height: 80px;
      line-height: 80px;
      font-size: 20px;
    }
  }

  .searchHotel {
    margin-top: 40px;
    margin-bottom: 30px;
    border: none;
    color: #fff;
    background-color: $mainColor;
  }

  .priceTit {
    margin-bottom: 15px;
  }

}

.top-title-box {
  padding: 10px;
  color: #fff !important;
  font-size: 0.59733rem !important;
  flex-direction: column;
  align-items: baseline;
  justify-content: flex-end;
}
